<%@ page import="ar.com.photo_admin.domain.Event"%>
<!doctype html>
<html>
<head>
<meta name="layout" content="main">
<g:set var="entityName"
	value="${message(code: 'event.label', default: 'Event')}" />
<title><g:message code="default.create.label"
		args="[entityName]" /></title>

<!-- Bootstrap CSS Toolkit styles -->
<link rel="stylesheet"
	href="${resource(dir:'css',file:'bootstrap.min.css')}" type="text/css" />

<!-- Bootstrap styles for responsive website layout, supporting different screen sizes -->
<!-- <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css"> -->


<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet"
	href="${resource(dir:'css',file:'jquery.fileupload-ui.css')}"
	type="text/css" />
	
	<calendar:resources lang="en" theme="aqua"/>

</head>
<body>
	<div>


		<!-- The file uploader Container -->
		<div class="container">
		
			<g:if test="${flash.message}">
				<div class="alert alert-success">  
				  <a class="close" data-dismiss="alert">×</a>  
				  <div class="message" role="status">${flash.message}</div>  
				</div>  
				
			</g:if>
			
			<g:hasErrors bean="${eventInstance}">
			<ul class="errors alert alert-error" role="alert">
				<g:eachError bean="${eventInstance}" var="error">
				<li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message error="${error}"/></li>
				</g:eachError>
			</ul>
			</g:hasErrors>
		
			<g:form name="eventForm" action="save">				
				<g:hiddenField name="id" value="${eventInstance?.id}" />
				<g:hiddenField name="eventNumber" value="${eventNumber}"/>
				<g:hiddenField id="coverId" name="coverId" value="${coverPhotoId}"/>
			
			
			<!-- Hover y campos obligatorios -->
				<div id="albumHeader" class="row">				 
					
					 	
				 	<div id="thumbnailContainer" class=" coverPhotoContainer span4">				 		
						<img id="coverPhotoImage" src="/PhotoAdminGrailsApp/images/defaultImage.jpg" class="coverPhoto thumbnail" name="0"></img>							
					</div>
					
					<div class="span5">				
						<div class=" fieldcontain ${hasErrors(bean: eventInstance, field: 'name', 'error')} required">
							<label for="name">
								<g:message code="eventAlbum.name.label" default="Nombre del evento" />
								<span class="required-indicator">*</span>
							</label>									
							<g:textField class="input-large albumName" name="name" required="" value="${eventInstance?.name}" placeholder="Ingrese el nombre"/>
						</div>	
							
						<div class="fieldcontain ${hasErrors(bean: eventInstance, field: 'description', 'error')}">	
							<label for="description">
								<g:message code="eventAlbum.description.label" default="Descripción del evento" />
							</label>
							<g:textArea class="presentationText" rows="3" maxlength="200" name="description" value="${eventInstance?.description}"
								placeholder="Ingrese la descripción"></g:textArea>
						</div>		
																														
						<div class="fieldcontain ${hasErrors(bean: eventInstance, field: 'eventDate', 'error')} required">
							<label for="eventDate">
								<g:message code="event.eventDate.label" default="Fecha" />
								<span class="required-indicator">*</span>
							</label>							
							<calendar:datePicker id="eventDate" dateFormat="%d/%m/%Y" name="eventDate" defaultValue="${eventInstance?.eventDate}" years="2000,2050"/>							
						</div>
					</div>							
				</div>
			</g:form>
		
		
		<!-- The file upload form used as target for the file upload widget -->
			<form id="fileupload" action="uploadAction" method="post"
				enctype="multipart/form-data" >
				
				<div class="row fileupload-buttonbar">
					<button id="btn_save" form="eventForm" class="btn btn-success" >Guardar</button>
					<button id="btn_cancel" class="btn btn-success" onclick="return false;">Cancelar</button>
					
					
						
					<span class="btn btn-success fileinput-button"> <i
						class="icon-plus icon-white"></i> <span>Agregar fotos</span> <input
						type="file" name="files[]" multiple>
					</span>
					<button type="submit" class="btn btn-primary start">
						<i class="icon-upload icon-white"></i> <span>Subir</span>
					</button>
					
					<div class="fr">
						<button id="btn_cover" class="btn btn-success " style="display:none;" onclick="return false;">Establecer portada</button>
						<button type="button" id="deleteUploadedPhotos" style="display:none;" class="btn btn-danger delete ">
							<i class="icon-trash icon-white"></i> <span>Borrar fotos seleccionads</span>
						</button>
					</div>
				</div>
				
				<div class="eventPhotosContainer row"> 
				    <div class="eventPhotosText"> Fotos del evento </div>
				    <div class="row uploadedPhotos-buttonbar">
				    	
				    </div>
				    <div id="upload_gallery">
				    	<div class="row"  id="allPhotosContainer">
				    	</div>
				    </div>
			    </div>
		    		
			
				<input type="hidden" name="eventNumber" value="${eventNumber}">

				<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
				<div class="row ">
					<div class="span5">
						<!-- The global progress bar -->
						<div
							class="progress progress-success progress-striped active fade">
							<div class="bar" style="width: 0%;"></div>
						</div>
					</div>
				</div>
				<!-- The loading indicator is shown during image processing -->
				<div class="fileupload-loading"></div>
				<br>
				<!-- The table listing the files available for upload/download -->
				<table class="table table-striped">
					<tbody class="files" data-toggle="modal-gallery"
						data-target="#modal-gallery"></tbody>
				</table>
			</form>			

		</div>

	<!-- The template to display files available for upload -->
	<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}	
    <tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            <td>
                <div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
            </td>
            <td class="start">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i>
                    <span>{%=locale.fileupload.start%}</span>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning">
                <i class="icon-ban-circle icon-white"></i>
                <span>{%=locale.fileupload.cancel%}</span>
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>
  <!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% 	for (var i=0, file; file=o.files[i]; i++) { 			 	
		if(!file.error){
			this.photosController.addPhoto(file);
			// Se llama al fw que hace que con on hover se visualice la imagen
			imagePreview();
		} else { 				%}
		<tr class="template-download fade">
            	<td class="name"><span>{%=file.name%}</span></td>
            	<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            	<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
				<td class="delete">
            	<button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
                	<i class="icon-trash icon-white"></i>
                	<span>{%=locale.fileupload.destroy%}</span>
            	</button>            
        	</td>
		</tr>
{%  	}	
	} %}
</script>

	<g:javascript src="vendor/jquery.ui.widget.js" />

	<!-- The Templates plugin is included to render the upload/download listings -->
	<script
		src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script>

	<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
	<script
		src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
	<!-- The Canvas to Blob plugin is included for image resizing functionality -->
	<script
		src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>
	

	<script
		src="http://blueimp.github.com/Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js"></script>

	<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
	<g:javascript src="jquery.iframe-transport.js" />

	<!-- The basic File Upload plugin -->
	<g:javascript src="jquery.fileupload.js" />

	<!-- The File Upload image processing plugin -->
	<g:javascript src="jquery.fileupload-ip.js" />

	<!-- The File Upload user interface plugin -->
	<g:javascript src="jquery.fileupload-ui.js" />

	<!-- The localization script -->
	<g:javascript src="locale.js" />

	<!-- The main application script -->
	<g:javascript src="main.js" />
	
	<g:javascript src="imagePreview.js" />
	
	
	<g:javascript src="model/Photo.js" />
	
	<g:javascript src="model/EventPhotosCollection.js" />
	
	<g:javascript src="controller/UploadPhotosController.js" />
	
	<script type="text/javascript">
       
	jQuery(document).ready(function(){

		photosController = new UploadPhotosController();		

		
		//Cuando carga la pagina, carga todas las imagenes ya existentes en el evento.
		jQuery.each(${uploaded_files}, function()  {									
			photosController.addPhoto(this);							
		});

		var coverPhotoId = "${coverPhotoId}";
		photosController.setCoverByPhotoId(coverPhotoId);
				
		jQuery('#deleteUploadedPhotos').click(function () {
			var postingUrl = "${createLink(controller: 'event', action: 'deleteSelectedPhotosTemporally')}";
			var eventNumber = "${event_number}";
			photosController.deleteSelectedPhotos(postingUrl,eventNumber);												
	    });

	    jQuery('#btn_cover').click(function () {	    	
	    	photosController.makeCoverPhoto();

		});

		
		jQuery("#btn_cancel").click(function(e){						
			var postingUrl = "${createLink(controller: 'event', action: 'cancel')}";
			var successUrl = "${createLink(controller:'event',action:'list')}";
			var eventNumber = "${eventNumber}";			
			var eventId = "${eventInstance?.id}";
			photosController.cancelChanges(postingUrl,successUrl,eventNumber,eventId);
		});

	    
		// Se llama al fw que hace que con on hover se visualice la imagen
		imagePreview();

   	});
    </script>	
    </div>
</body>
</html>

